<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flask_Sqlachemy_RESTfulAPI_Codegen</title>
    <link rel="stylesheet" href="static/cdn/element-plus.css" />
    <script src="static/cdn/vue-3.2.26.js"></script>
    <script src="static/cdn/element-ui.js"></script>
    <link rel="stylesheet" href="static/global.css" />
    <link rel="stylesheet" href="static/iconfont/iconfont.css" />
</head>

<body>
    <div id="app">
        <div class="container_warp">
            <div class="container_header">
                <el-row>
                    <el-col :offset="5" :span="14">
                        Flask_Sqlachemy_RESTfulAPI_Codegen
                    </el-col>
                    <el-col :span="5">
                        <el-tooltip placement="top">
                            <template #content>如果喜欢就点个星星支持一下</template>
                            <a href="https://gitee.com/ncepu-bj/Python_RESTfulAPI_Codegen" target="_blank" style="float: right;margin-right: 20px;color: #fff;text-decoration: auto;">
                                <div class="iconfont icon-shoucang1"></div>
                            </a>
                        </el-tooltip>
                    </el-col>
                </el-row>
            </div>
            <div class="container_body">
                <el-row>
                    <el-col :offset="4" :span="16">
                        <el-card shadow="never">
                            <el-card shadow="never">
                                <template #header>数据库配置</template> 请检查要生成接口项目代码的目标数据库，生成器将针对此数据库生成一个分层设计的接口项目
                            </el-card>
                            <el-tabs v-model="show_switch" @tab-click="changeShow" style="padding: 0 10px;">
                                <el-tab-pane label="数据表" name="tables"></el-tab-pane>
                                <el-tab-pane label="视图" name="views"></el-tab-pane>
                            </el-tabs>
                            <el-card>
                                <el-carousel :autoplay="false" indicator-position="none" arrow="never" ref="carousel" style="height:calc(100vh - 400px);">
                                    <el-carousel-item style="height: auto;" name="tables">
                                        <el-scrollbar style="height:calc(100vh - 400px);">
                                            <el-row style="padding:0  0 14px 0;">
                                                <el-col :span="4">
                                                    <div>表名</div>
                                                </el-col>
                                                <el-col :span="8">
                                                    <div>加密字段</div>
                                                </el-col>
                                                <el-col :span="4">
                                                    <div>逻辑删除字段</div>
                                                </el-col>

                                                <el-col :span="4">
                                                    <div>业务主键</div>
                                                </el-col>
                                                <el-col :span="4">
                                                    <div>业务主键生成规则</div>
                                                </el-col>
                                            </el-row>
                                            <el-divider style="margin:0;"></el-divider>
                                            <el-empty v-if="tables.length===0" description="no data"></el-empty>
                                            <div class="container_tables" v-for="(item, index) in tables" :key="index" style="padding: 14px 0;">
                                                <el-row>
                                                    <el-col :span="4">
                                                        <div style="overflow: hidden; margin:0 10px;">{{item.table}}</div>
                                                    </el-col>
                                                    <el-col :span="8">
                                                        <span v-if="item.encrypt.length===0">/</span>
                                                        <span v-for="(fieldItem, index) in item.encrypt" :key="index"><span><el-divider v-if="index!=0" direction="vertical"></el-divider>{{fieldItem}}</span></span>
                                                    </el-col>
                                                    <el-col :span="4">
                                                        <div>{{item.logicaldeletemark || '/'}}</div>
                                                    </el-col>
                                                    <el-col :span="4">
                                                        <div>{{item.businesskeyname || '/'}}</div>
                                                    </el-col>
                                                    <el-col :span="4">
                                                        <div>{{item.businesskeyrule || '/'}}</div>
                                                    </el-col>
                                                    <el-divider style="position: relative;bottom: -14px;margin: 0;"></el-divider>
                                                </el-row>
                                            </div>
                                        </el-scrollbar>
                                    </el-carousel-item>
                                    <el-carousel-item style="height: auto;" name="views">
                                        <el-scrollbar style="height:calc(100vh - 400px);">
                                            <el-row style="padding:0  0 14px 0;">
                                                <el-col :span="8">
                                                    <div>表名</div>
                                                </el-col>
                                                <el-col :span="16">
                                                    <div>接口查询字段</div>
                                                </el-col>
                                            </el-row>
                                            <el-divider style="margin:0;"></el-divider>
                                            <el-empty v-if="views.length===0" description="no data"></el-empty>
                                            <div class="container_tables" v-for="(item, index) in views" :key="index" style="padding: 14px 0;">
                                                <el-row>
                                                    <el-col :span="8">
                                                        <div style="overflow: hidden; margin:0 10px;">{{item.view}}</div>
                                                    </el-col>
                                                    <el-col :span="16">
                                                        <span v-if="item.filter.length===0">/</span>
                                                        <span v-for="(fieldItem, index) in item.filter" :key="index"><span><el-divider v-if="index!=0" direction="vertical"></el-divider>{{fieldItem}}</span></span>
                                                    </el-col>
                                                    <el-divider style="position: relative;bottom: -14px;margin: 0;"></el-divider>
                                                </el-row>
                                            </div>
                                        </el-scrollbar>
                                    </el-carousel-item>
                                </el-carousel>

                            </el-card>
                        </el-card>
                    </el-col>
                </el-row>
            </div>
        </div>
        <div class="container_footer">
            <el-row>
                <el-col :offset="4" :span="16">
                    <div style="margin:0 20px;">
                        <el-button type="primary" style="float: left;width: 150px;" :loading="nextStep_loading" @click="back">上一步</el-button>
                        <el-button type="primary" style="float:right;width: 150px;" :loading="nextStep_loading" @click="nextStep">下一步</el-button>
                    </div>
                </el-col>
            </el-row>
        </div>
    </div>
</body>
<script>
    const {
        reactive,
        toRefs,
        onMounted,
        ref,
    } = Vue
    const composition = {
            setup() {
                const state = reactive({
                    tables: [],
                    views: [],
                    nextStep_loading: false,
                    show_switch: 'tables',
                });

                const nextStep = () => {
                    state.nextStep_loading = true;
                    location.replace('project')
                    state.nextStep_loading = false;
                }

                const back = () => {
                    location.replace('views')
                }

                //切换 数据表 视图的展示
                const carousel = ref(null);
                const changeShow = (tab) => {
                    carousel.value.setActiveItem(tab.paneName)
                }

                onMounted(() => {
                    let data_tables = JSON.parse(localStorage.getItem("tables"));
                    // 找出所有的选中的基本表
                    for (let i = 0; i < data_tables.length; i++) {
                        if (data_tables[i].ischecked) {
                            data_tables[i].encrypt = []
                            for (let j = 0; j < data_tables[i].field.length; j++) {
                                if (data_tables[i].field[j].field_encrypt) {
                                    data_tables[i].encrypt.push(data_tables[i].field[j].field_name)
                                }
                            }
                            state.tables.push(data_tables[i])
                        }
                    }
                    let data_views = JSON.parse(localStorage.getItem("views"));
                    // 找出所有的选中的视图
                    for (let i = 0; i < data_views.length; i++) {
                        if (data_views[i].ischecked) {
                            data_views[i].filter = []
                            for (let j = 0; j < data_views[i].filter_field.length; j++) {
                                if (data_views[i].filter_field[j].ischecked) {
                                    data_views[i].filter.push(data_views[i].filter_field[j].field_name)
                                }
                            }
                            state.views.push(data_views[i])
                        }
                    }

                    if (!data_tables || !data_views) {
                        ElMessage.warning('请重新连接数据库')
                        setTimeout(() => {
                            location.replace('/')
                        }, 1000)
                    }
                });

                return {
                    ...toRefs(state),
                    nextStep,
                    back,
                    changeShow,
                    carousel,
                };
            },
        }
        // 创建vue3的实例
    const app = Vue.createApp(
        composition
    )
    app.use(ElementPlus)
        // 挂载Vue的app实例
    app.mount('#app')
</script>

<style>
    .container_tables:nth-child(even) {
        background: #f5f7fa;
    }
</style>

</html>